@@include('include/header.html',{"name": "btn","desc": "按钮"})

<section id="btn">
    <div class="demo-item">
        <p class="demo-desc">普通小按钮</p>
        <div class="demo-block">
            <div class="ui-btn-wrap">
                <button class="ui-btn-s">
                    确定
                </button>
                <button class="ui-btn-s active">
                    确定
                </button>
                <button class="ui-btn-s disabled">
                    取消
                </button>
                <button class="ui-btn-s" disabled>
                    取消
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">普通按钮</p>
        <div class="demo-block"> 
            <div class="ui-btn-wrap">
                <button class="ui-btn">
                    确定
                </button>
                <button class="ui-btn active">
                    确定
                </button>
                <button class="ui-btn" disabled>
                    取消
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">带进度的按钮</p>
        <div class="demo-block"> 
            <div class="ui-btn-wrap">
                <button class="ui-btn ui-btn-progress">确定</button>
                <button class="ui-btn ui-btn-progress">
                    <span>50%</span>
                    <span class="ui-btn-inner" style="width:50%"><span>50%</span></span>
                </button>
                <button class="ui-btn ui-btn-progress" disabled>取消</button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">蓝色按钮</p>
        <div class="demo-block"> 
            <div class="ui-btn-wrap">
                <button class="ui-btn ui-btn-primary">
                    确定
                </button>
                <button class="ui-btn ui-btn-primary active">
                    确定
                </button>
                <button class="ui-btn ui-btn-primary" disabled>
                    取消
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">红色按钮</p>
        <div class="demo-block"> 
            <div class="ui-btn-wrap">
                <button class="ui-btn ui-btn-danger">
                    确定
                </button>
                <button class="ui-btn ui-btn-danger active">
                    确定
                </button>
                <button class="ui-btn ui-btn-danger" disabled>
                    取消
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">普通大按钮</p>
        <div class="demo-block"> 
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg active">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg disabled">
                    取消
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">蓝色大按钮</p>
        <div class="demo-block"> 
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-primary">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-primary active">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-primary" disabled>
                    取消
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">红色大按钮</p>
        <div class="demo-block"> 
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-danger">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-danger active">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-danger" disabled>
                    取消
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">普通按钮组</p>
        <div class="demo-block">  
            <div class="ui-btn-group">
                <button class="ui-btn-lg">
                    拒绝
                </button>
                <button class="ui-btn-lg">
                    拒绝
                </button>
                <button class="ui-btn-lg ui-btn-primary">
                    同意
                </button>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">底部按钮组</p>
        <div class="demo-block">       
            <div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
                <button class="ui-btn-lg">
                    拒绝
                </button>
                <button class="ui-btn-lg">
                    拒绝
                </button>
                <button class="ui-btn-lg ui-btn-primary">
                    同意
                </button>
            </div>
        </div>
    </div>
</section>

@@include('include/footer.html')